<template>
  <el-dialog
    v-loading="loading"
    :visible.sync="dialogVisible"
    :show-close="true"
    :append-to-body="true"
    :class="{'mobile-el-dialog': showMobilePage}"
    class="small-common-dialog-size"
    @close="closeDialog"
  >
    <div :class="{'mobile-create-supplier-account': showMobilePage}" :style="{maxHeight:dialogMainHeight+'px'}" class="create-supplier-account-scorll">
      <Title title="添加收款账户" style="margin-bottom: 18px;" />
      <el-form ref="ruleForm" :model="paramsObj" :rules="rules" :label-position="showMobilePage?'left':'right'" class="lineHeight32" label-width="80px">
        <el-form-item label="支付平台" prop="payPlatform">
          <el-select
            v-model="paramsObj.payPlatform"
            class="width240"
            placeholder="请选择"
            filterable
            clearable
            size="small"
            @change="handlePayPlatform">
            <el-option
              v-for="item in paymentList"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="supplierType === 0" prop="isBindCloud" label="云账户">
          <el-select
            v-model="paramsObj.isBindCloud"
            class="width240"
            placeholder="请选择云账户"
            size="small">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item prop="payName" label="收款户名">
          <el-input
            v-model="paramsObj.payName"
            :maxlength="100"
            class="width240"
            placeholder="请输入收款户名"
            type="text"
            size="small"
          />
        </el-form-item>
        <el-form-item label="收款账号" prop="payNum">
          <el-input
            v-model="paramsObj.payNum"
            :maxlength="200"
            type="text"
            class="width240"
            size="small"
            placeholder="请输入收款账号"
          />
        </el-form-item>
        <el-form-item label="身份证号" prop="identityNumber">
          <el-input
            v-model="paramsObj.identityNumber"
            :maxlength="20"
            type="text"
            class="width240"
            size="small"
            placeholder="请输入身份证号"
          />
        </el-form-item>
        <el-form-item label="联系电话" prop="tel">
          <el-input
            v-model="paramsObj.tel"
            :maxlength="20"
            class="width240"
            type="text"
            placeholder="请输入联系电话"
            size="small"
          />
        </el-form-item>
        <el-form-item label="银行" prop="bank">
          <div class="flex-center">
            <selectWithoutHttp
              v-model="paramsObj.bank"
              :list-data="bankList"
              :create-new="true"
              key-name="value"
              class="width240"
              filterable
              @createNewItem="addNewBank"
            />
            <InfoIcon content="输入系统中未添加的银行名称时将自动添加该银行" style="margin-left: 4px;" />
          </div>
        </el-form-item>
        <el-form-item label="省市" prop="province">
          <three-level-area
            :selected-options="handelArr(paramsObj.province)"
            select-type="city"
            placeholder="请选择省市"
            @update:options="threeLevelArea($event)" />
        </el-form-item>
        <el-form-item label="支行" prop="subBank">
          <el-input
            v-model="paramsObj.subBank"
            :maxlength="100"
            class="width240"
            type="text"
            placeholder="请输入支行"
            size="small"
          />
        </el-form-item>
      </el-form>
      <fixed-pagination :open-fixed="showMobilePage">
        <div :class="`${showMobilePage?'center':'dialog-footer'}`">
          <el-button :loading="btnLoading" :disabled="btnLoading" size="small" class="submit-btn" type="primary" @click="handelOk">确定</el-button>
          <el-button class="cancel-btn-style" type="info" size="small" style="font-size: 16px" @click="closeDialog">取消</el-button>
        </div>
      </fixed-pagination>
    </div>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import ThreeLevelArea from '@/components/ThreeLevelArea';
import { supplierAccountAdd, editAccount } from '@/api/supplier';
import accountTable from '@/mixins/accountTable';
import { mapState } from 'vuex';

export default {
  components: { Title, ThreeLevelArea, selectWithoutHttp },
  mixins: [accountTable],
  props: {
    supplierType: { // 0:个人 1:公司
      type: Number | String,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      btnLoading: false,
      dialogVisible: false,
      dialogMainHeight: '',
      supplierId: '',
      isEdit: false,
      index: null,
      paramsObj: {
        isBindCloud: null,
        payName: '',
        payNum: '',
        identityNumber: '',
        tel: '',
        bank: '',
        province: '',
        subBank: '',
        payPlatform: ''
      },
      options: [
        { id: 1, name: '未绑定' },
        { id: 0, name: '已绑定' }
      ]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    rules() {
      const rules = {
        'isBindCloud': [{ required: true, message: '请选择云账户', trigger: 'change' }],
        'payName': [{ required: true, message: '请输入收款户名', trigger: 'blur' }],
        'payNum': [{ required: true, message: '请输入收款账号', trigger: 'blur' }]
      };
      if (this.supplierType === 0) {
        rules.identityNumber = [{ required: true, message: '请输入身份证号', trigger: 'blur' }];
        rules.tel = [{ required: true, message: '请输入联系电话', trigger: 'blur' }];
      }
      if (!this.paramsObj.payPlatform) {
        rules.bank = [{ required: true, message: '请选择银行', trigger: 'change' }];
        rules.province = [{ required: true, message: '请选择省市', trigger: 'change' }];
        rules.subBank = [{ required: true, message: '请输入支行', trigger: 'blur' }];
      } else {
        delete rules.bank;
        delete rules.province;
        delete rules.subBank;
      }
      return rules;
    }
  },
  created() {
    this.getBankList();
    this.getPaymentList();
  },
  methods: {
    backfillBank(name) {
      this.paramsObj.bank = name;
    },
    handelOk() {
      this.$refs['ruleForm'].validate(async(vaild) => {
        if (vaild) {
          const paramsObj = this.paramsObj;
          if (this.isEdit) {
            paramsObj.supplierId = this.supplierId;
          } else {
            paramsObj.id = this.supplierId;
          }
          this.btnLoading = true;
          try {
            if (paramsObj.id) {
              const res = this.isEdit ? await editAccount(paramsObj) : await supplierAccountAdd(paramsObj);
              this.btnLoading = false;
              if (res.code === 200) {
                this.$message.success(this.isEdit ? '操作成功' : '创建成功');
                this.closeDialog();
                this.$emit('updateData');
              } else {
                this.$message.error(res.message);
              }
            } else {
              // 新增供应商弹窗新增/编辑
              if (this.index || this.index === 0) {
                this.$emit('editData', paramsObj, this.index);
              } else {
                this.$emit('addData', paramsObj);
              }
              this.btnLoading = false;
              this.closeDialog();
            }
          } catch (error) {
            this.btnLoading = false;
          }
        } else {
          return false;
        }
      });
    },
    openDialog(id, data, index) {
      const clientHeight = window.innerHeight;
      this.dialogMainHeight = (clientHeight * 4) / 5;
      this.dialogVisible = true;
      this.supplierId = id;
      this.$refs.ruleForm && this.$refs.ruleForm.clearValidate();
      if (data) {
        this.isEdit = true;
        this.index = index;
        this.paramsObj = JSON.parse(JSON.stringify(data));
      }
    },
    closeDialog() {
      this.dialogVisible = false;
      this.paramsObj = {
        isBindCloud: null,
        payName: '',
        payNum: '',
        identityNumber: '',
        tel: '',
        bank: '',
        province: '',
        subBank: ''
      };
      this.index = null;
      this.$refs.ruleForm && this.$refs.ruleForm.clearValidate();
    },
    // 选择城市
    threeLevelArea(data) {
      this.paramsObj.province = data.join(',');
    },
    handelArr(data) {
      if (!data) return [];
      if (typeof data === 'string') {
        return data.split(',');
      } else {
        return data;
      }
    },
    handlePayPlatform: _.debounce(function(value) {
      if (value) {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.clearValidate('bank');
          this.$refs.ruleForm.clearValidate('province');
          this.$refs.ruleForm.clearValidate('subBank');
        }
      }
    }, 500)
  }
};
</script>

<style lang="scss" scoped>
.create-supplier-account-scorll {
  @include scrollBar($x: hidden, $y: auto, $width: 6px);
  &::v-deep {
    .threee-level-area-wrap {
      .el-input {
        display: flex;
      }
    }
  }
}
.mobile-el-dialog {
  .create-supplier-account-scorll {
    @include scrollBar($width: 0);
    max-height: 80vh !important;
    padding-bottom: 56px;
    overflow-y: auto !important;
  }
}
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.width240 {
  width: 240px;
  &::v-deep  {
    .el-input__inner {
      width: 240px;
    }
  }
}
.mobile-create-supplier-account {
  &::v-deep {
    .threee-level-area-wrap {
      .el-cascader {
        width: 200px !important;
      }
    }
  }
  .width240 {
    width: 200px;
    &::v-deep  {
      .el-input__inner {
        width: 200px;
      }
    }
  }
}
</style>
<style lang="scss">
.allow-create-select {
  .el-select-dropdown__empty {
    display: none;
  }
}
</style>
